<template>
    <el-form :inline="true" ref="queryForm">
        <el-form-item label="指定链接">
            <el-input v-model="formFilter.videoUrlVal" placeholder="请输入链接"></el-input>
        </el-form-item>
        <el-form-item label="关注间隔">
            <el-input v-model="formFilter.ainterval" style="width: 80px;"></el-input>
            S
        </el-form-item>
        <el-form-item label="是否限制关注数量">
            <el-checkbox v-model="formFilter.limitFlag" :true-label='1' :false-label="0"></el-checkbox>
        </el-form-item>
        <el-form-item label="循环轮数">
            <el-input v-model="formFilter.count" style="width: 80px;"></el-input>
        </el-form-item>
        <el-form-item label="轮数延迟">
            <el-input v-model="formFilter.cinterval" style="width: 80px;"></el-input>
            S
        </el-form-item>
<!--        <el-form-item label="关注方式">-->
<!--            <el-select v-model="formFilter.type" placeholder="关注方式">-->
<!--                <el-option-->
<!--                        v-for="(item, key) in typeKv"-->
<!--                        :key="key"-->
<!--                        :label="item"-->
<!--                        :value="key">-->
<!--                </el-option>-->
<!--            </el-select>-->
<!--        </el-form-item>-->
        <el-form-item>
            <el-button type="success" icon='el-icon-video-play' style="width: 300px" @click="startAttention('')" :loading="loading">{{loading? '关注中':'开始关注'}}</el-button>
            <el-button type="success" icon='el-icon-video-pause' @click="stop" :disabled="Boolean(!loading)">停止</el-button>
        </el-form-item>
        <el-divider></el-divider>
        <el-upload
                style="display: inline-block; margin-right: 10px;"
                action="/upload/file"
                :http-request="upload"
                :show-file-list='false'
                multiple>
            <el-button type="success" plain size="mini">导入视频</el-button>
        </el-upload>
        <el-button type="success" size="mini" @click="onRest">清空</el-button>
    </el-form>
</template>

<script>
  import datePicker from '@/components/datePicker'
  import { TYPE_KV } from '@/utils/constant'
  import { startAttention, stop, getTaskProcessMessage } from '@/api/attention'
  import {upload} from '@/api/users'
  import eventBus from "../../utils/eventBus";

  export default {
    name: "attention",
    components: {
      datePicker
    },
    data () {
      return {
        typeKv: TYPE_KV,
        formFilter: {
          "videoUrlVal": '',
          "accounts": [],
          "ainterval": '',
          "cinterval": '',
          "count": '',
          "limitFlag": '',
          "type": 20,
          "videoUrl": []
        },
        taskId: '',
        timer: null,
        loading:false
      }
    },
    props: {
      get: Function,
      selectionVideo: Array
    },
    methods: {
      queryFn () {
        this.get()
      },
      upload (config) {
        const formData = new FormData()
        formData.append('file', config.file)
        formData.append('type', '20')
        return upload(formData).then(() => {
          this.$message.success('导入视频成功')
          this.get()
        })
      },
      async startAttention (url) {
        try {
          const allSelection = this.$store.state.user.allSelection
          const currentSelection = this.$store.state.user.currentSelection
          // if(!this.selectionVideo.length) {
          //   this.$message.warning('没有选择视频')
          //   return
          // }
          if(url) {
            this.formFilter.videoUrl  = [url]
          } else if(this.formFilter.videoUrlVal) {
            this.formFilter.videoUrl  = [this.formFilter.videoUrlVal]
          } else {
            this.formFilter.videoUrl  = this.selectionVideo.map(i => i.videoUrl)
          }
          if(allSelection.length === currentSelection.length) {
            this.formFilter.accounts = ['-1']
          } else {
            if(!currentSelection.length) {
              this.$message.warning('没有选择用户')
              return
            }
            this.formFilter.accounts  = currentSelection.map(i => i.phone)
          }
          const params = {...this.formFilter}
          delete params.videoUrlVal
          const {data} = await startAttention(params)
          console.log(data.taskId)
          this.taskId = data.taskId
          this.loading = true
          this.$message.success('开始关注')
          // this.timer = setInterval(this.getTaskProcessMessage, 5000)
          this.getTaskProcessMessage()
        } catch (e) {
          console.log(e)
        }
      },
      async stop () {
        try {
          if(!this.taskId) {
            this.$message.warning('没有开始关注')
          }
          const params = {
            "taskId": this.taskId,
            "taskType": 20
          }
          const {data} = await stop(params)
          this.$message.success('停止关注成功')
          this.loading = false
          this.taskId = ''
        } catch (e) {
          console.log(e)
        }
      },
      onRest() {
        this.formFilter = {
          "videoUrlVal": '',
            "accounts": [],
            "ainterval": '',
            "cinterval": '',
            "count": '',
            "limitFlag": '',
            "type": 20,
            "videoUrl": []
        }
        eventBus.$emit('restTable')
      },
      async getTaskProcessMessage() {
        try {
          const params = {
            "taskId": this.taskId,
            "type": 20
          }
          const {data} = await getTaskProcessMessage(params)
          const num = data.totalCnt - data.overCnt
          if(num <= 0) {
            this.$message.success('关注结束')
            // this.stop()
            clearTimeout(this.timer)
            this.loading = false
            return
          }
          this.timer = setTimeout(() => {
            this.getTaskProcessMessage()
          }, 5000)
        }catch (e) {
          this.loading = false
          console.log(e)
        }
      }
    },
    destroyed () {
      clearTimeout(this.timer)
    }
  }
</script>

<style scoped>

</style>
